<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>
		<style type="text/css">
			/*
			 * 元素选择器作用于:1.编辑默认样式 2.定于全局样式
			 * hover:鼠标悬停在上面时，应用的样式
			 * */
			
			a {
				text-decoration: none;
				/*下划线等*/
			}
			
			.buy_btn {
				display: inline-block;
				width: 80px;
				padding: 4px 0;
				color: mediumpurple;
				border: 1px solid #646464;
				font-size: 20px;
				text-align: center;
			}
			/*
			 * a标签的4种状态,正确顺序(lvha)
			 * 1.link     链接未访问状态
			 * 2.hover    鼠标悬停 状态
			 * 3.active   鼠标点击状态
			 * 4.visited  链接被访问过状态
			 * */
			/*当链接被访问过时,应用的样式*/
			
			.buy_btn:visited {
				background-color: #efefef;
			}
			
			/*鼠标悬停在上面时，应用的样式*/
			.buy_btn:hover {
				color: #fff;
				background-color: #D2691E;
			}
			
			/*当鼠标点击时,应用的样式*/
			.buy_btn:active {
				background-color: #666;
			}
			
			.ipt {
				color: #000;
			}
			
			.ipt:focus {
				color: #FF0000;
			}
			
			.line>li:first-child {
				background-color: #000000;
			}
			
			.line>li:nth-child(2) {
				background-color: #666666;
			}
			
			/*奇数*/
			.line>li:nth-child(2n-1) {
				background-color: #000;
			}
			
			/*偶数*/
			.line>li:nth-child(2n) {
				background-color: #666666;
			}
			
			/*匹配第一个li*/
			.line>li:first-of-type {
				background-color: #D2691E/*!important*/
				;
				/*使用!important 可以无视后者样式,直接覆盖前者,采用此样式
				万不得已不要滥用!important*/
			}
			
			.line>li:nth-of-type(3) {
				background-color: antiquewhite;
			}
			html:root{
				text-align: center;
			}/*全局样式*/
		</style>
		<a href="#" class="buy_btn">
			购票
		</a>
		<input type="text" class="ipt" />
<!---------------------------------------------------->
		<ul class="line">
			<p>斑马线1</p>
			<li>斑马线2</li>
			<li>斑马线3</li>
			<li>斑马线4</li>
			<li>斑马线5</li>
			<li>斑马线6</li>
			<li>斑马线7</li>
			<li>斑马线8</li>
			<li>斑马线9</li>
			<li>斑马线10</li>
		</ul>
	</body>

</html>